#notify-app {
  @extend %box-radius-left;

  overflow: hidden;
  width: 25rem;
  max-width: 100vw;
  right: 0;

  .empty {
    text-align: center;
    padding: 2rem 0;
  }

  .spinner {
    margin: 50px auto;
  }

  .notifications {
    @include transition(opacity);
  }

  .notifications.scrolling {
    opacity: 0.5;
  }

  .pager {
    display: block;
    padding: 0.5rem;
    text-align: center;

    &.disabled::before {
      opacity: 0.3;
    }

    &:not(.disabled) {
      cursor: pointer;
      color: $c-link;

      @include transition;
    }

    &:not(.disabled):hover {
      background: $c-primary;
      color: $c-primary-over;
    }

    &.prev {
      border-bottom: $border;
    }
  }

  .browser-notification {
    display: block;
    padding: 0.5em 1em;
    background: $c-brag;
    color: $c-brag-over;
  }

  .content {
    flex: 0 1 100%;

    span:first-child {
      @extend %flex-between;
    }

    span:last-child {
      @extend %ellipsis;

      display: block;
    }

    time {
      @extend %roboto;
    }
  }
}

.site_notification {
  display: flex;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-bottom: $border;
  position: relative;

  &:hover {
    background: $c-bg-zebra;

    i {
      color: $c-link;
      opacity: 0.9;
    }
  }

  &.new {
    background: mix($c-new, $c-bg-header-dropdown, 27%);

    i {
      color: $c-new;
      opacity: 0.7;
    }

    &:hover {
      background: mix($c-new, $c-bg-header-dropdown, 36%);

      i {
        opacity: 1;
      }
    }
  }

  i {
    font-size: 2em;
    opacity: 0.5;
    margin-right: 1rem;
  }
}
